<template>
  <div class="category-filter">
    <!-- 父级分类 -->
    <div class="parent-container">
      <div class="parent-level" ref="parentLevelRef">
        <div v-for="parent in parentData" :key="parent.id" class="parent-item" :class="{ active: isParentActive(parent) }" @click="handleParentClick(parent)" :data-id="parent.id">
          {{ parent.standardName }}
        </div>
      </div>

      <!-- 子级容器 -->
      <div v-if="currentChildren.length > 0" class="children-level">
        <div v-for="child in currentChildren" :key="child.id" class="child-item" :class="{ active: isChildActive(child) }" @click="handleChildClick(child)">
          {{ child.standardName }}
        </div>

        <!-- 递归加载孙级 -->
        <FilterItem
          v-if="currentGrandChildren.length > 0"
          :parent-data="currentGrandChildren"
          :active-parent-id="activeParentId"
          :active-child-id="activeChildId"
          @update-selection="handleGrandChildSelection"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from "vue";

  interface CategoryItem {
    id: string;
    standardName: string;
    standardType: string;
    standardTypeValue: string;
    standardLevel: string;
    standardLevelValue: string;
    pid: string;
    weight: number;
    remark: string | null;
    hasChosen: boolean;
    children?: CategoryItem[];
  }

  // interface StandardLevel {
  //  id: string, type:  number; name:string, weight: number, remark:string | null;
  // }
  const props = defineProps<{
    parentData: CategoryItem[];
    activeParentId?: string | null;
    activeChildId?: string | null;
  }>();

  const emit = defineEmits<{
    (event: "update-selection", payload: { parentId: string | null; childId: string | null }): void;
  }>();

  const parentLevelRef = ref<HTMLElement | null>(null);
  const activeParentId = ref<string | null>(props.activeParentId || null);
  const activeChildId = ref<string | null>(props.activeChildId || null);
  const currentChildren = ref<CategoryItem[]>([]);
  const currentGrandChildren = ref<CategoryItem[]>([]);

  // 检查父级是否激活
  const isParentActive = (parent: CategoryItem) => {
    return activeParentId.value === parent.id;
  };

  // 检查子级是否激活
  const isChildActive = (child: CategoryItem) => {
    return activeChildId.value === child.id;
  };

  // 处理父级点击
  const handleParentClick = (parent: CategoryItem) => {
    if (!parent) return;
    activeParentId.value = parent.id;
    activeChildId.value = null;
    currentChildren.value = parent.children || [];
    currentGrandChildren.value = [];
    emit("update-selection", { parentId: parent.id, childId: null });
  };

  // 处理子级点击
  const handleChildClick = (child: CategoryItem) => {
    if (!child) return;
    activeChildId.value = child.id;
    currentGrandChildren.value = child.children || [];
    emit("update-selection", { parentId: activeParentId.value, childId: child.id });
  };

  // 处理孙级选中事件
  const handleGrandChildSelection = (payload: { parentId: string | null; childId: string | null; selectedItem: CategoryItem | null }) => {
    // 传递当前选中的孙级对象
    emit("update-selection", payload);
  };
</script>

<style scoped>
.category-filter {
  width: 91%;
  position: relative;
}

.parent-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  transition: height 0.3s ease;
}

.parent-level {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* padding: 10px; */

  border-radius: 4px;
}

.parent-item {
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid #dcdfe6;
  color: #4e5969;
  white-space: nowrap;
}

.parent-item.active {
  background: #409eff;
  color: white;
  border-color: #409eff;
}

.children-level {
  margin-top: 10px;
  padding: 10px;
  background: white;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  /*   position: absolute;

  left: 0;

  padding: 10px;
  background: white;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  z-index: 1000; */
  /* 确保弹层在最上层 */
}

.child-item {
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid #dcdfe6;
  color: #4e5969;
  cursor: pointer;
}

.child-item.active {
  background: #409eff;
  color: white;
}
</style>
